<template>
    <div>
        <h1>Vue常用指令</h1>
        <h3>(1)v-text指令: 纯文本</h3>
        <h3>(2): {{}}:是v-text简化写法</h3>
        <div v-text='a'></div>
        <div v-text='b'></div>
        <div>{{a}}</div>
        <div>{{b}}</div>
        <h3>(3):v-html</h3>
        <div v-html="a"></div>
        <div v-html="b"></div>

        <hr>
        <h3>(4)v-model指令: 双向绑定指令。只能用于可编辑可修改的视图。</h3>
        <div>
        
            <input type="text" v-model="c">   {{c}}
        </div>

        <div>
            {{d}}
            <input type="radio" value="1" v-model="d"> 男
            <input type="radio" value="2" v-model="d">女
        </div>
        <div>
            {{e}}
            <select v-model="e">
                <option value="大连">大连</option>
                <option value="北京">北京</option>
            </select>
        </div>

        <div>
            {{f}}
            <input type="chechbox" value="a" v-model="f">足球
            <input type="chechbox" value="b" v-model="f"> 篮球
            <input type="chechbox" value="c" v-model="f">排球
             <input type="chechbox" value="d" v-model="f">橄榄球
        </div>

        <div>
            {{e}}
            <select v-model="e">
                <option value="大连">大连</option>
                <option value="北京">北京</option>
                <option value="贵阳">贵阳</option>
                <option value="成都">成都</option>
            </select>
        </div>       
    </div>
</template>

<script>
export default {
    name:'E',
    data() {
        return {
            a:'你好',
            b:'<input>',
            c:'hongyi',
            d:'1',
            e:"大连",
            f:['a','b','c','d']
        }
    },
    methods: {
        
    },
}
</script>

<style>
</style>